<template>
  <div class="" style="min-height: 500px;" v-loading="loading" element-loading-background="rgba(255, 255, 255 0.8)">
    <div class="ef-container" id="eventform" v-if="!saveState.includes('SUCCESS')">
      <participants-info :data.sync="participantsinfo" ref="participantsinfo"></participants-info>
      <div class="tc mt-3">
        <el-button type="success width-200" plain round @click="$router.go(-1)">返回</el-button>
        <el-button type="success width-200" round @click="confirm('SUBMIT', 'ALREADY')"
          v-if="signStatus === 'NOT'" >提交</el-button>
      </div>
    </div>
    <div class="va-container flex-column-center promp-msg" v-if="saveState.includes('SUCCESS')">
      <img src="../../assets/shenhetongguo.jpg" alt="" style="margin-top: 100px;">
      <h2 v-show="saveState === 'SAVESUCCESS'">保存成功</h2>
      <h2 v-show="saveState === 'SUBMITSUCCESS'">提交成功</h2>
      <el-button type="success" round @click="corssBack(true)">
        返回活动列表
      </el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import ParticipantsInfo from './ParticipantsInfo'

let v = async function (self) {
  let result = await self.$refs.participantsinfo.validate()
  if (!result) {
    return false
  }
  if (self.$duplicates(self.participantsinfo, (item1, item2) =>{
    return item1.name === item2.name && item1.phone === item2.phone
  }).length > 0) {
    self.$message({
      message: '参会人员中有姓名和联系方式相同的信息，为了区分，请做相应的标识区分',
      type: 'warning'
    })
    return false
  }
  return true
}
  export default {
    title: '活动报名表单',
    name: 'eventform',
    data () {
      return {
        loading: false,
        saveState: 'WAIT',
        signStatus: '',
        activityInfo: {
          basicId: '',
          basicTitle: '',
          activityCompanyId: ''
        },
        participantsinfo: [],
        // row: null
      }
    },
    methods: {
      confirm (status, signStatus) {
        v(this).then(result => {
          if (result) {
            let obj = Object.assign({}, this.row, this.unitinfo)
             obj.activityId = this.activityInfo.basicId // 活动id
             obj.activityName = this.activityInfo.basicTitle // 活动名称
             obj.mscsActivitySignPeople = this.participantsinfo
             if (this.activityInfo.activityCompanyId.length > 1) {
               obj.activityCompanyId = this.activityInfo.activityCompanyId
             }
             obj.mscsActivitySignPeople.forEach(item => {
               item.activityCompanyName = obj.companyName
               item.activityId = this.activityInfo.basicId // 活动id
               item.activityName = this.activityInfo.basicTitle // 活动名称
               item.signUpStatus = signStatus
               if (this.activityInfo.activityCompanyId.length > 1) {
                 item.activityCompanyId = this.activityInfo.activityCompanyId
               }
             })
            // obj.userId  = getuser().data.user.userId
            obj.userId = this.$store.state.user.user.user.userId
            obj.saveSubmit = status
            obj.signUpStatus = signStatus // 报名状态 NOT 未报名; ALREADY 已报名; CANCEL 已取消
            this.loading = true
            axios.post('/mscs/activity/activitySign', obj).then((res) => {
              if (res.data.code === 1) {
                // this.corssBack()
                this.saveState = status + 'SUCCESS'
              } else {
                this.$codeError(res)
              }
            }).catch((error) => {
              this.$catchError(error)
            }).finally(() => {
              this.loading = false
            })

          } else {
            this.$alert('保存或提交失败，信息填写不完整或不正确，其中标注红色为未填写或填写错误', {
              confirmButtonText: '确定',
            })
          }
        })
      },
      getForm () {
        axios.post('/mscs/activity/findUserSignActvivtyDetatils', this.$paramsConvert({
          userId: this.$store.state.user.user.user.userId,
          activityId: this.activityInfo.basicId
        })).then((res) => {
          if (res.data.code === 1) {
            this.setData(res.data.data)
          } else {
            this.$codeError(res)
          }
        }).catch(error => {
          this.$catchError(error)
        })
      },
      setData (data) {
        this.activityInfo.activityCompanyId = data.activityCompanyId
        this.participantsinfo = data.mscsActivitySignPeople
      },
      corssBack (flag) {
        this.$router.push({name: 'eventlist', params: {refresh: true}})
        setTimeout(() => {
          this.saveState = 'WAIT'
        }, 100)
      }
    },
    beforeRouteEnter (to, from, next) {
     next(vm => {
       let params = to.params
       if (!from.name) {
         params = vm.$lsget('routerToParams')
       }
       vm.activityInfo.basicId = params.modelId || params.activityId
       vm.activityInfo.basicTitle = params.basicTitle
       vm.activityInfo.signStatus = params.signStatus
       vm.activityInfo.activityStatus = params.activityStatus

       if (from.name === 'eventlist') { // 从报名列表来，说明已经报名了
         vm.signStatus = params.signStatus
         vm.getForm()
       } else { // 从活动详情来，有可能报名，有可能已经报名（最后一个判断'ALREADY'，是为刷新页面做的判断）
         if (vm.activityInfo.signStatus === 'SAVE' || vm.activityInfo.signStatus === 'SUBMIT' || vm.activityInfo.signStatus === 'ALREADY') {
           vm.getForm()
           if (vm.activityInfo.signStatus === 'SUBMIT') {
             vm.signStatus = 'ALREADY'
           } else {
             vm.signStatus = 'NOT'
           }
         } else {
           vm.signStatus = 'NOT'
         }
       }

     })
    },
    components: {
      // 'unit-info': UnitInfo,
      'participants-info': ParticipantsInfo
    }
  }
</script>
<style>
  #eventform {
    padding-top: 50px;
  }
  /* 去掉折叠下方的间距，防止表单出现滚动 */
  #eventform .el-collapse-item__content {
    padding-bottom: 0;
  }
</style>
